﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分类热点消息</title>
    <link type="text/css" rel="stylesheet" href="css/public.css"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/type1920.js"></script>

    <script type="text/javascript" src="js/matrix.js"></script>
    <script type="text/javascript" src="data/hotinfo-data.json"></script>
</head>
<body>
    <div id="cb-container" class="cb-hot-container">
        <header class="cb-header"></header>
        <nav class="cb-navbar">
            <ul>
                <li id="b0" class="cb-nav-cur"><a href="javascript:;">新闻</a></li>
                <li id="b1"><a href="javascript:;">娱乐</a></li>
                <li id="b2"><a href="javascript:;">财经</a></li>
                <li id="b3"><a href="javascript:;">科技</a></li>
                <li id="b4"><a href="javascript:;">教育</a></li>
                <li id="b5"><a href="javascript:;">汽车</a></li>
            </ul>
        </nav>
        <div class="cb-main-con" id="cb-main-con">
        </div>
    </div>
    <script type="text/javascript">
        var timer;
        var currentTimer;
        BeginChange(258, 250, 5, datas[0][0]);
        function qiehuan(n) {
            var len = datas[n].length;
            if (n == 0) {
                timer = timePlay(n, len);
                return timer;
            }
            else if (n == 1) {
                timer = timePlay(n, len);
                return timer;
            }
            else if (n == 2) {
                timer = timePlay(n, len);
                return timer;
            }
            else if (n == 3) {
                timer = timePlay(n, len);
                return timer;
            }
            else if (n == 4) {
                timer = timePlay(n, len);
                return timer;
            }
        }
        function timePlay(n, len) {
            BeginChange(258, 250, 5, datas[n][0]);
            var i = 1;
            timer = window.setInterval(function () {
                if (i > len - 1) {
                    i = 0;
                }
                BeginChange(258, 250, 5, datas[n][i]);
                i++;
            }, 5000);
            // 当数据只有一屏时停止切换
            if (datas[n].length == 1) {
                clearInterval(timer);
            }
            return timer;
        }
        $(function () {
            var n = 1;
            // qiehuan(0);
            if (currentTimer != null) {
                // 当切换导航时停止当前轮播
                clearInterval(currentTimer);
            }
            currentTimer = qiehuan(0);
        });
        $(".cb-navbar ul li").click(function () {
            var index = $(this).index();
            var n = index;
            $('#b' + n + '').addClass('cb-nav-cur').siblings().removeClass('cb-nav-cur');
            if (currentTimer != null) {
                // 当切换导航时停止当前轮播
                clearInterval(currentTimer);
            }
            currentTimer = qiehuan(n);
        });
    </script>
</body>
</html>